<template>
  <div class="heard-right-box hw-flex-style-e-c" id="heard-id-403">
    <div @click.stop="addfocu" class="seachBox" :class="{ 'seachBox-active': inputType }">
      <div class="input-boxs" v-if="inputType">
        <t-input
          :maxlength="25"
          v-model="value"
          @enter="seachInfo()"
          auto-width
          placeholder="搜索"
          @blur="blur"
          @focus="focus"
        >
          <!-- <template #suffixIcon>
          <t-icon @click="seachInfo()" name="search" size="16" class="icon-style" style="color: D2AD77"></t-icon>
        </template> -->
        </t-input>  
      </div>  
      <div   
        class="icon-box"  
        :class="{
          'icon-box-noHome': props.type && store.homeShow,
          'icon-box-noHome-try': (props.type && !store.homeShow) || route.meta.isVip,
        }"
      >
        <i :class="{ 'icon-style-home-active-seach': route.meta.isInfo }" class="doorIcon"> &#xe62c; </i>
      </div>
      <div class="seachBox-list" @click="itemShowadd" v-if="inputType && itemShow">
        <div class="seach-title">
          <span>搜索历史</span>
          <i class="doorIcon" @click="deleteList" style="color:rgba(0,0,0,0.38),font-size:12px">&#xe634;</i>
          <!-- <t-icon @click="deleteList" name="delete" size="12" style="rgba(0,0,0,0.38)"></t-icon> -->
        </div>
        <div class="searchInfo-list">
          <span
            @click="seachInfos(item)"
            class="searchInfo-item"
            v-for="(item, index) in store.searchInfo"
            :key="index"
            >{{ item }}</span
          >
        </div>
      </div>
    </div>
    <a :href="workbenchUrl + 'news/myNews'" target="_blank" v-if="UserStore.userInfo.info" class="notification-box">
      <div
        v-if="notifNumber > 0"
        class="num-box"
        :class="{ 'num-box-active': (props.type && !store.homeShow) || route.meta.isInfo || route.meta.isVip }"
      >
        {{ notifNumber < 99 ? notifNumber : '99+' }}
      </div>
      <i
        :class="{
          'icon-style-home': (props.type && !store.homeShow) || route.meta.isVip,
          'icon-style-home-active': route.meta.isInfo,
        }"
        class="iconfonts icon-style icon-style-class"
        :style="{
          fontSize: '24px',
          'line-height': '24px',
        }"
      >
        &#xe6a2;
      </i>

      <!-- <t-icon  
        name="notification" 
        size="24"
        class="icon-style" 
        :class="{ 'icon-style-home': props.type && store.homeShow }"
      ></t-icon> -->
    </a>
    <div v-if="UserStore.userInfo.info" class="avatar-box">
      <t-popup
        attach="#heard-id-403"
        overlayClassName="popup"
        class="placement top"
        placement="top"
        showArrow
        destroyOnClose
      >
        <template #content> <heardCardVue /></template>

        <!-- <t-dropdown :min-column-width="125" trigger="hover"> 
        <template #dropdown>
          <t-dropdown-menu>
            <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
              <t-icon name="poweroff"></t-icon>
              <span>退出登录</span>  
            </t-dropdown-item>  
          </t-dropdown-menu>   
        </template> -->
        <div class="avatar-boxs">
          <div class="avatar-boxs-shadow"></div>
          <t-avatar
            size="32px"
            :image="urls + UserStore.userInfo.info.coverUrl + '?imageView2/2/w/32/h/32/format/webp'"
            v-if="UserStore.userInfo.info.coverUrl"
          >
          </t-avatar>
          <t-avatar size="32px" v-else :image="publicUrls + 'assets/img/userImg.png'"></t-avatar>
        </div>
      </t-popup>
      <!-- </t-dropdown>   -->
    </div>
    <div
      class=""
      :class="{
        'margin-left-box-logo': UserStore.userInfo.info,
      }"
    >
      <a
        :href="workbenchUrl + 'dashboard/base'"
        target="_blank"
        v-if="UserStore.userInfo.info"
        :class="{
          'margin-left-box-logoout-job': props.type && !store.homeShow,
          'margin-left-box-logoout-info': route.meta.isInfo,
        }"
        class="margin-left-box hw-click-cursor hw-flex-style-c-c blank-home"
      >
        工作台
      </a>
      <div v-else class="No-LOGIN">
        <div
          @click="toPath"
          class="login"
          :class="{
            'margin-left-box-logoout': (props.type && !store.homeShow) || route.meta.isVip,
            'login-style-home': props.type && store.homeShow,
            'login-info-hover': route.meta.isInfo,
          }"
        >
          登录
        </div>
        <div
          class="register"
          @click="modelShow = true"
          :class="{ 'register-logoout': (props.type && !store.homeShow) || route.meta.isInfo }"
        >
          立即策展
        </div>
      </div>
    </div>
    <t-dialog
      :visible="modelShow"
      :closeBtn="false"
      :confirm-on-enter="true"
      :on-cancel="onCancel"
      :on-close="close"
      :on-confirm="onConfirmAnother"
      :cancelBtn="null"
      :confirmBtn="null"
    >
      <template #header>
        <span>选择身份</span>
      </template>
      <template #body>
        <t-radio-group v-model="radioValue" @change="onChange">
          <div class="center-box">
            <div
              class="pathLink-item"
              :class="{ 'pathLink-item-lock': item.lock }"
              @click="setGroupId(item.id, item.lock)"
              :style="{
                borderColor: radioValue == item.id ? '#E62B17' : '',
              }"
              v-for="(item, index) in tabList2"
              :key="item.id"
            >
              <img class="item-heard" :src="item.heardImg" alt="" />

              <div class="item-btm">
                <div class="item-btm-top">
                  <div class="radio-boxs">
                    <t-radio :value="item.id" :disabled="item.lock">{{ item.name }}</t-radio>
                  </div>

                  <span class="item-d" v-if="!item.lock">{{ item.value }}</span>
                  <span class="item-d" v-else>暂未开放</span>
                </div>
                <div class="solid-item"></div>

                <div class="btm-list-parent" v-if="item.id === 3">
                  <span class="parent-title">注册所需资料</span>
                  <div class="btm-list-item">
                    <div class="btm-list-item-border"></div>
                    <span> 手机号码 </span>
                  </div>
                </div>
                <div class="btm-list-parent" v-else-if="item.id === 2">
                  <span class="parent-title">注册所需资料</span>
                  <div class="btm-list-item">
                    <div class="btm-list-item-border"></div>
                    <span> 单位基础信息 </span>
                  </div>
                  <div class="btm-list-item">
                    <div class="btm-list-item-border"></div>
                    <span> 认证公函 </span>
                    <a
                      class="load-item"
                      :href="publicUrls + 'mode/%E8%AE%B0%E5%BF%86%E7%BD%91%E8%AE%A4%E8%AF%81%E5%85%AC%E5%87%BD.docx'"
                    >
                      <i class="doorIcon">&#xe656;</i>

                      <span>下载模板</span>
                    </a>
                  </div>
                  <!-- <div class="btm-list-item">
                    <div class="btm-list-item-border">

                    </div>
                    <span>
                      单位管理员身份信息
                    </span>
                  </div> -->
                </div>
                <div class="btm-list-parent" v-else>
                  <span class="parent-title">注册所需资料</span>
                  <div class="btm-list-item">
                    <div class="btm-list-item-border"></div>
                    <span> 暂未开放 </span>
                  </div>
                  <!-- <div class="btm-list-item">
                    <div class="btm-list-item-border">

                    </div>
                    <span>
                      居民身份证信息
                    </span>
                  </div>
                  <div class="btm-list-item"> 
                    <div class="btm-list-item-border">

                    </div>
                    <span>
                      手机号码
                    </span>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </t-radio-group>
        <div class="btn-box">
          <div class="btn-box-1" @click="close">
            <span>取消</span>
          </div>
          <div class="btn-box-2" @click="stepPath">
            <span>下一步</span>
          </div>
        </div>
      </template>
      <template #footer> </template>
    </t-dialog>
  </div>
</template> 
 
<script setup lang="ts">
// @ts-nocheck
import { publicUrls } from '@/utils/minxin';
import { noticeTotal } from '@/api/banner/banner';
import { linkurl, workbenchUrl } from '@/utils/minxin';
import { ref, watch } from 'vue';
import { removeAuthorization } from '@/api/utils';
import { urls } from '@/utils/request/upload';
import { useRouter, useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { tabList2 } from './data';
import heardCardVue from '../heardCard/heardCard.vue';

const route = useRoute();
const modelShow = ref(false);
const inputType = ref(false);
const store = useProjectStore();
const { seachType } = storeToRefs(store);
const itemShow = ref(false);
const notifNumber = ref(0);
const value = ref('');
const radioValue = ref(2);
const props = defineProps({
  type: {
    type: Boolean,
  },
});
const getList = () => {
  noticeTotal().then((res) => {
    notifNumber.value = res.data;
  });
};

const router = useRouter();
const emit = defineEmits(['seachExbit']);
const addSeach = () => {
  emit('seachExbit');
};
if (UserStore.userInfo.info) {
  getList();
}
const setGroupId = (id: number, lock?: any) => {
  if (lock) {
    return;
  }
  radioValue.value = id;
};
const toPath = () => {
  // let url = window.location.href;
  // if (UserStore.userInfo.info) {
  //   window.open('http://workbench.wuzhan.art/#/dashboard/base', '_blank');
  // } else {
  router.push({
    path: '/login',
    query: { redirectType: 2 },
  });
  // }
};
const stepPath = () => {
  console.log(radioValue.value);
  if (radioValue.value === 0) {
    return;
  }
  if (radioValue.value !== 3) {
    router.push({
      path: '/authentication',
      query: {
        authenticationId: radioValue.value,
      },
    });
  } else {
    router.push({
      path: '/register',
    });
  }
};
const ok = (): void => {
  modelShow.value = false;
};
const close = (context?: any): void => {
  modelShow.value = false;
};
const onCancel = (context?: any): void => {
  modelShow.value = false;
};
const onConfirmAnother = () => {
  modelShow.value = false;
};
const handleLogout = () => {
  // console.log(UserStore)
  UserStore.logout();
  removeAuthorization();
  // let url = window.location.href;
  // router.push({
  //   path: '/login',
  //   query: { redirect: url },
  // });
};
const deleteList = () => {
  store.setSearchClear();
};
const onChange = () => {};
const blur = () => {
  //失去焦点
  // inputType.value = false;
  // itemShow.value = false;
};
const focus = () => {
  //获得焦点
  inputType.value = true;
  setTimeout(() => {
    itemShow.value = true;
  }, 300);
};
const addfocu = () => {
  inputType.value = true;
  // setTimeout(()=>{
  //   itemShow.value = true;
  // },1000)
};
const itemShowadd = () => {
  // itemShow.value = true;
  // inputType.value = true;
};
const seachInfo = (e: string) => {
  if (value.value) {
    store.setSearchInfo(value.value);
  }
  router.push({ path: '/seach', query: { search: value.value } });

  value.value = '';
  itemShow.value = false;
  inputType.value = false;
};
const seachInfos = (e: string) => {
  router.push({ path: '/seach', query: { search: e } });
  value.value = '';
  itemShow.value = false;
  inputType.value = false;
};
watch(
  () => seachType,
  () => {
    console.log('触发');
    itemShow.value = false;
    inputType.value = false;
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
@import './ignore.less';
.doorIcon {
  font-size: 24px;
}
:deep(.icon-box-noHome) {
  .doorIcon {
    // color: ;
  }
}
:deep(.margin-left-box-logoout) {
  // background: #BF160A;
  border-radius: 4px;
  border-color: transparent;

  // color: #BF160A;
  color: rgba(0, 0, 0, 0.59);
}
:deep(.margin-left-box-logoout:hover) {
  color: #f2573f;
  // background: #F2573F;
}

.register-logoout {
  border: 1px solid transparent;

  background: #e62b17;
  color: #fff;
}
.register-logoout:hover {
  background: #f2573f;
}
.margin-left-box-logoout-info {
  width: 84px;
  height: 36px;
  background: #e62b17;
  border-radius: 4px;

  color: #ffffff;
  border: none;
}
.margin-left-box-logoout-info:hover {
  background: #f2573f;
}
.margin-left-box-logoout-job {
  background: #e62b17;
  border: none;
  color: #fff;
}
.login-info-hover:hover {
  color: #f2573f;
}
.icon-style-home-active:hover {
  color: #f2573f;
}
.icon-style-home-active-seach:hover {
  color: #f2573f !important;
}
#heard-id-403 {
  :deep(.t-menu) {
    margin-left: 0;
  }
  :deep(.t-popup) {
    border-radius: 0px;
    // border-radius: 6px;
  }
  :deep(.t-popup__content) {
    background-color: #fff;
    border-color: #fff;
    width: 304px;
    padding: 16px 0px;

    background: #ffffff;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1), 0px 8px 10px 1px rgba(0, 0, 0, 0.06),
      0px 3px 14px 2px rgba(0, 0, 0, 0.05);
    border-radius: 0px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
  }
  :deep(.t-popup__arrow::before) {
    display: none;
  }
  :deep(.t-popup[data-popper-placement^='bottom'] .t-popup__content) {
    border-radius: 6px 6px 6px 6px !important;
    padding: 0;
  }
  :deep(.placement) {
    // border-color: #333;
    background: transparent !important;
    border-radius: 0px;
  }
  :deep(.t-popup[data-popper-placement^='left'] .t-popup__arrow::before) {
    background-color: #fff;
    // border-color: #333;
  }
  :deep(.t-popup__arrow::before) {
    background-color: #fff;
  }
}
</style>